// useRadioGroup.ts
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export const useRadioGroup = () => {
  const chart = ref<HTMLElement | null>(null); // ECharts 图表容器
  const selectedOption = ref<string>('smooth'); // 当前选中的单选按钮
  let myChart: echarts.ECharts | null = null; // ECharts 实例

  // 初始化 ECharts
  onMounted(() => {
    if (chart.value) {
      myChart = echarts.init(chart.value);
      updateChart(); // 初始加载图表
    }
  });

  // 根据选择的选项更新图表
  const updateChart = () => {
    let option: echarts.EChartOption = {};

    switch (selectedOption.value) {
      case 'smooth':
        option = getSmoothOption();
        break;
      case 'rise':
        option = getRiseOption();
        break;
      case 'abnormal':
        option = getAbnormalOption();
        break;
      case 'position':
        option = getPositionOption();
        break;
      default:
        option = {};
    }

    if (myChart) {
      myChart.setOption(option);
    }
  };

  // 平滑段阈值分析的图表配置
  const getSmoothOption = (): echarts.EChartOption => {
    return {
      title: {
        text: '平滑段阈值分析',
      },
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '平滑段',
          type: 'line',
          data: [5, 20, 36, 10, 10],
        },
      ],
    };
  };

  // 上升段阈值分析的图表配置
  const getRiseOption = (): echarts.EChartOption => {
    return {
      title: {
        text: '上升段阈值分析',
      },
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '上升段',
          type: 'line',
          data: [10, 22, 28, 43, 49],
        },
      ],
    };
  };

  // 本月异常点个数统计的图表配置
  const getAbnormalOption = (): echarts.EChartOption => {
    return {
      title: {
        text: '本月异常点个数统计',
      },
      xAxis: {
        type: 'category',
        data: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '异常点',
          type: 'bar',
          data: [5, 20, 36, 10],
        },
      ],
    };
  };

  // 异常点于标准曲线位置的图表配置
  const getPositionOption = (): echarts.EChartOption => {
    return {
      title: {
        text: '异常点于标准曲线位置',
      },
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '标准曲线',
          type: 'line',
          data: [10, 20, 30, 40, 50],
        },
        {
          name: '异常点',
          type: 'scatter',
          data: [15, 25, 35, 45, 55],
        },
      ],
    };
  };

  return {
    chart,
    selectedOption,
    updateChart,
  };
};